<template>
  <div id="all" class="list">
    <el-card class="box-card">
      <div id="search_bar">
        <div class="span">
          <span class="star">*</span> 用户账号：
          <div class="div_inner">
            <el-input v-model="input" id="userId" placeholder="请输入关键字"></el-input>
          </div>
        </div>
        <div class="span">
          <div class="block">
            <span class="demonstration">日期</span>
            <el-date-picker
              v-model="value1"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions">
            </el-date-picker>
          </div>
        </div>
        <div class="span">
          <el-button type="primary" size="small" @click="search" icon="el-icon-search">查询</el-button>
        </div>

        <div class="span">
          <el-button type="primary" size="small" @click="reset">重置</el-button>
        </div>
      </div>
      <div id="body">
        <h4 style="margin-left: 0px;float: left">数据列表</h4>
        <template>
          <el-table :data="tableData"  stripe style="width: 100%">
            <el-table-column type="index" label="序号" align="center" width="80">
            </el-table-column>
            <el-table-column prop="userId" label="用户账号" align="center" width="170">
            </el-table-column>
            <el-table-column prop="userName" label="用户昵称" align="center" width="170">
            </el-table-column>
            <el-table-column prop="sleepValue" label="累计睡眠时长" align="center" width="170">
            </el-table-column>
            <el-table-column prop="deepValue" label="累计深睡时长" align="center" width="170">
            </el-table-column>
            <el-table-column prop="shallowValue" label="累计浅睡时长" align="center" width="170">
            </el-table-column>
            <el-table-column prop="awakeValue" label="累计清醒时长" align="center" width="170">
            </el-table-column>
            <el-table-column fixed="right" prop="manager" label="操作" align="center" width="160">
              <template slot-scope="scope">
                <el-button @click="handleClick(scope.row)" type="text" size="mini" >
                  查看明细
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </div>
      <div class="block" style="margin-top: 20px;">
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                       :current-page="currentPage"
                       :page-sizes="[6, 12, 20]"
                       :page-size="6"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total=total>
        </el-pagination>
      </div>
    </el-card>
  </div>

</template>

<script>

  export default {
    data() {
      return {
        pageSize: 6,
        pageNum: 1,
        queryStartTime: null,
        queryEndTime: null,
        total:'',
        tableData: [],
        input: '',
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        value1: '',
      }
    },
    components: {
    },
    created() {
      this.getSleepList();
    },
    methods: {
      reset() {
        this.getSleepList();
      },
      //时间格式化
      formatDate:function(row, column) {
        // 获取单元格数据
        let data = row[column.property]
        // if (this.$MyComm.isEmpty(data)) {
        // 	return ''
        // }
        let dt = new Date(data)
        return dt.getFullYear() + '-' + (dt.getMonth() + 1) + '-' + dt.getDate()
      },
      //监听每页条数改变
      handleSizeChange(val) {
        this.pageSize = val;
        this.getSleepList();
        console.log(`每页 ${val} 条`);
      },
      //监听当前页改变
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.pageNum = val;
        this.getSleepList();
      },
      //弹出窗体展示数据使用的方法
  /*    handleClick(row,index) {
        this.getWeightDetailList(row.userId);
        this.dialogFormVisible = true;
      },*/
      getSleepList(){
        this.axios.get('micro-sports-server/sleep/all',{
          params:{
            pageSize: this.pageSize,
            pageNum: this.pageNum,
            userId:this.userId,
            queryStartTime: this.queryStartTime,
            queryEndTime: this.queryEndTime,
          }
        }).then(res => {
          console.log(res.data);
          this.tableData=res.data.data.data;
          this.total=res.data.data.total;
        })
      },
      search() {
        if (this.value1 !== '' && this.value1 !== null) {
          let obj = this.value1;
          let val = JSON.stringify(obj);
          val = val.replace(/\"/g, "");
          val = val.replace(/\[/g, "");
          val = val.replace(/\]/g, "");
          let str = val.split(',');
          this.queryStartTime = str[0];
          this.queryEndTime = str[1];
        }
        this.getSleepList();
        this.queryStartTime = null;
        this.queryEndTime = null;
      },
      /*getWeightDetailList(userId){
        this.axios.get('/weight/one',{
          params:{
            userId:userId,
          }
        }).then(res => {
          console.log(res.data);
          this.userName=res.data.data.userName;
          this.weightValue=res.data.data.weightValue;
          this.bmi=res.data.data.bmi;
          this.fatPercentage=res.data.data.fatPercentage;
          this.muscleValue=res.data.data.muscleValue;
          this.moisturePercentage=res.data.data.moisturePercentage;
          this.metabolizing=res.data.data.metabolizing;
        })
      },*/
    },
  }
</script>
<style scoped>

  .div_inner{
    position: relative;
    font-size: 14px;
    display: inline-block;
  }
  .span{
    display: inline-block;
    margin-left: 15px;
  }
  #search_bar{
    height:100px;
    background-color: azure;
    text-align:center;
    line-height:80px;
    margin-top: 10px;
  }
  .star{
    color:red;
  }
  #body{
    width: 100%;
  }
  .list{
    /*height: 400px;*/
    border: 1px solid white;
    width: 96%;
    margin: auto;
    padding-left: 20px;
    padding-bottom: 20px;
    box-sizing: border-box;
    background-color: white;
  }
</style>
